<template>
  <div class="stat-card">
    <p class="stat-title">{{ statTitle }}</p>
    <h3 class="stat-value">{{ statValue }}</h3>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  statTitle: { type: String, required: true },
  statValue: { type: [Number, String], required: true }
})
</script>

<style scoped>
.stat-card {
  background-color: #f9f9f9;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
  width: 250px;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stat-title {
  color: #666;
  margin-bottom: 10px;
  font-size: 16px;
}

.stat-value {
  color: #333;
  font-size: 22px;
  margin: 0;
}
</style>